<template>
  <div
    style="position: relative; width: 100vw"
    :style="{
      height: height + 'px',
      top: '5vh',
    }"
  >
    <el-card class="card" style="width: 1200px">
      <template #header>
        <div class="card-header">
          <el-row>
            <el-col :span="2">
              <el-button icon="back" type="primary" class="w-full t0_login header_return" @click.prevent="goBack"
                >返回登录
              </el-button>
            </el-col>
            <el-col :span="22">
              <el-steps :space="100" :active="stepActive" simple>
                <el-step title="施工总承包登记">
                  <template #icon>
                    <svg-icon icon-class="office" />
                  </template>
                </el-step>
                <el-step title="项目登记">
                  <template #icon>
                    <i-ep-list />
                  </template>
                </el-step>
                <el-step title="劳资专管员登记">
                  <template #icon>
                    <i-ep-avatar />
                  </template>
                </el-step>
                <el-step title="完成注册">
                  <template #icon>
                    <i-ep-select />
                  </template>
                </el-step>
              </el-steps>
            </el-col>
          </el-row>
        </div>
      </template>

      <keep-alive>
        <component :is="componentName" ref="componentRef" @current-project="currentProject" @current-corp="currentCorp">
        </component>
      </keep-alive>
      <div class="card-footer">
        <el-button v-if="stepActive === 2 || stepActive === 1" type="primary" size="default" @click="previousStep"
          >{{ previousText }}
        </el-button>

        <el-button
          v-if="stepActive === 1 || stepActive === 0"
          v-loading="loading"
          type="primary"
          size="default"
          @click="nextStep"
          >{{ nextText }}
        </el-button>
        <el-text v-if="stepActive === 0" style="margin-left: 15px"
          >我需要的项目不在列表中,点击 <el-link type="primary" @click="addProject">新建</el-link></el-text
        >
        <el-button v-if="stepActive === 1" type="info" size="default" @click="resetForm">{{ resetText }} </el-button>
        <el-button v-if="stepActive === 2" :loading="loading" type="primary" size="default" @click="submitForm"
          >{{ registerText }}
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
import ProjectManager from "@/views/account/register/project/projectManager.vue";
import ProjectInfo from "@/views/account/register/project/projectInfo.vue";
import CropInfo from "@/views/account/register/project/cropInfo.vue";
import SuccessForm from "@/views/account/register/resComponent/index.vue";
import { new_projectADReg } from "@/api/account/project/index";
import { useRouter } from "vue-router";
import { Except, Ride } from "@/utils/decimal";

const downloadUrl = ref("/app/download/SmzTestCardReader_Setup.exe");
const router = useRouter();
const stepActive = ref(0);
const nextText = ref("下一步");
const previousText = ref("上一步");
const resetText = ref("重  置");
const registerText = ref("注  册");
const componentName = ref();
//是否为新建
const isAdd = ref(false);

//施工总承包登记表单
const cropInfoRef = ref();
//项目信息表单
const projectInfoRef = ref();
//劳资专管员表单
const managerRef = ref();
//注册成功表单
const successRef = ref();
//主键的临时表单
const componentRef = ref();
//注册时的加载中显示
const loading = ref(false);
//页面高度
const height = ref(0);

watch(
  stepActive,
  () => {
    if (stepActive.value === 0) {
      componentName.value = markRaw(CropInfo);
      height.value = 600;
    }
    if (stepActive.value === 1) {
      componentName.value = markRaw(ProjectInfo);
      height.value = 800;
    }

    if (stepActive.value === 2) {
      componentName.value = markRaw(ProjectManager);
      height.value = 450;
    }
    if (stepActive.value === 3) {
      componentName.value = markRaw(SuccessForm);
      height.value = 450;
    }
  },
  { deep: true, immediate: true }
);

//返回上一页
const goBack = () => {
  router.go(-1);
};

//获取当前选中的项目
const currentProject = function (callback: Function) {
  if (isAdd.value) return callback();
  callback(cropInfoRef.value.currentProject.projectId, true);
};
//获取当前选中的项目
const currentCorp = function (callback: Function) {
  callback(cropInfoRef.value.formData);
};

//新建项目
async function addProject() {
  let res = await componentRef.value.validation(true);
  if (!res) {
    return;
  }
  cropInfoRef.value = componentRef.value;
  isAdd.value = true;
  ++stepActive.value;
  if (projectInfoRef.value) {
    projectInfoRef.value.resetForm();
  }
}

//下一步
async function nextStep() {
  if (stepActive.value === 0) {
    let res = await componentRef.value.validation();
    if (!res) {
      return;
    }
    cropInfoRef.value = componentRef.value;
    isAdd.value = false;
    if (projectInfoRef.value) {
      projectInfoRef.value.resetForm();
    }
  }
  if (stepActive.value === 1) {
    let res = await componentRef.value.validation();
    if (!res) {
      return;
    }
    projectInfoRef.value = componentRef.value;
  }
  ++stepActive.value;
}

//上一步
function previousStep() {
  if (stepActive.value === 1) {
    projectInfoRef.value = componentRef.value;
  }
  --stepActive.value;
}
//重置表单
function resetForm() {
  componentRef.value.resetForm();
}

/*注册*/
async function submitForm() {
  let result = await componentRef.value.validation();
  if (!result) {
    return;
  }
  managerRef.value = componentRef.value;
  loading.value = true;
  if (projectInfoRef.value.fileList.length > 0) {
    projectInfoRef.value.formData.attachments = projectInfoRef.value.fileList.map((item: any) => {
      if (item.status === "success") {
        if (item.response) {
          return item.response.data;
        }
      }
    });
  }
  if (projectInfoRef.value.noSupervisorFileList.length > 0) {
    projectInfoRef.value.formData.noSupervisorAttachments = projectInfoRef.value.noSupervisorFileList.map(
      (item: any) => {
        if (item.status === "success") {
          if (item.response) {
            return item.response.data;
          }
        }
      }
    );
  }
  if (projectInfoRef.value.positionFileList.length > 0) {
    projectInfoRef.value.formData.positionAttachments = projectInfoRef.value.positionFileList.map((item: any) => {
      if (item.status === "success") {
        if (item.response) {
          return item.response.data;
        }
      }
    });
  }
  Object.assign(projectInfoRef.value.formData, cropInfoRef.value.formData);
  let submitForm = Object.assign({}, projectInfoRef.value.formData);
  submitForm.contractAmount = Ride(submitForm.contractAmount, 10000);
  submitForm.supervisorCorpAmount = Ride(submitForm.supervisorCorpAmount, 10000);
  submitForm.earnestMoney = Ride(submitForm.earnestMoney, 10000);
  new_projectADReg(managerRef.value.formData, submitForm)
    .then((res) => {
      if (res.success) {
        ElMessage({
          type: "success",
          message: res.msg,
        });
        ++stepActive.value;
        loading.value = false;
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
        loading.value = false;
        return;
      }
    })
    .finally(() => {
      loading.value = false;
    });
}
</script>
<style lang="scss" scoped>
.card {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.card-header {
  height: 70px !important;
  // display: flex;
  // justify-content: space-between;
  // background-color: #337ecc;
  // align-items: center;
  // padding: 10px;
}

.card-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  z-index: 9999;
}

.header_return {
  height: 45px;
  border-radius: 0;
}

:deep() .el-card__header {
  padding: 0px;
  border: 0;
}

:deep() .el-card__body {
  padding: 0px;
}

:deep() .el-step__title {
  font-weight: 600;
  font-size: 15px !important;
}
</style>
